<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="../common.jsp" %>
<div id="footpanel">



    <ul id="mainpanel">
        <li><a href="${_ctx}/index.action" class="home">首页</a></li>
        <li><a href="#" class="profile">View Profile <small>View Profile</small></a></li>
        <li><a href="#" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>
        <li><a href="#" class="contacts">Contacts <small>Contacts</small></a></li>
        <li><a href="#" class="messages">Messages (10) <small>Messages</small></a></li>
        <li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
        <li><a href="#" class="videos">Videos <small>Videos</small></a></li>
       	<li id="aboutus">
        	<a href="#" class="alerts">About us</a>

            <div class="subpanel">
            <h3><span> &ndash; </span>@Chinalotsynergy</h3>
            <ul>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系我们</a></li>				

                <li><a href="#" class="delete">X</a><p><a href="#">Et voco </a> Duis vel quis at metuo obruo, turpis quadrum nostrud <a href="#">lobortis facilisis</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="#">Tego</a> nulla eum probo metuo nullus indoles os consequat commoveo os<a href="#">lobortis facilisis</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Nonummy</a> nulla eum probo metuo nullus indoles os consequat commoveo <a href="#">lobortis facilisis</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="#">Tego</a> minim autem aptent et jumentum metuo uxor nibh euismod si <a href="#">lobortis facilisis</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

            </ul>
            </div>
        </li>
        <li id="chatpanel">
        	<a href="#" class="chat">Friends (<strong>18</strong>) </a>
            <div class="subpanel">
            <h3><span> &ndash; </span>Friends Online</h3>

            <ul>
            	<li><span>Family Members</span></li>
            	<li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>
                <li><span>Other Friends</span></li>
                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="${_ctx}/resource/img/footer/chat-thumb.gif" alt="" /> Your Friend</a></li>
            </ul>
            </div>
        </li>
	</ul>
</div>	

    <script type="text/javascript">
		//Adjust panel height
		$.fn.adjustPanel = function(){
		    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset sub-panel and ul height
	
		    var windowHeight = $(window).height(); //Get the height of the browser viewport
		    var panelsub = $(this).find(".subpanel").height(); //Get the height of sub-panel
		    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of sub-panel)
		    var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel
	
		    if ( panelsub > panelAdjust ) {	 //If sub-panel is taller than max height...
		        $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust sub-panel to max height
		        $(this).find("ul").css({ 'height' : panelAdjust}); ////Adjust subpanel ul to new size
		    }
		    else  { //If sub-panel is smaller than max height...
		        $(this).find("ul").css({ 'height' : 'auto'}); //Set sub-panel ul to auto (default size)
		    }
		};
		
		
		$(document).ready(function() {
        	//Execute function on load
        	$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
        	$("#aboutus").adjustPanel(); //Run the adjustPanel function on #aboutus

        	//Each time the viewport is adjusted/resized, execute the function
        	$(window).resize(function () {
        	    $("#chatpanel").adjustPanel();
        	    $("#aboutus").adjustPanel();
        	});
        	
        	
        	//Click event on Chat Panel and Alert Panel	
        	$("#chatpanel a:first, #aboutus a:first").click(function() { //If clicked on the first link of #chatpanel and #aboutus...
        	    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
        	        $(this).next(".subpanel").hide(); //Hide active subpanel
        	        $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
        	    }
        	    else { //if subpanel is not active...
        	        $(".subpanel").hide(); //Hide all subpanels
        	        $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
        	        $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
        	        $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
        	    }
        	    return false; //Prevent browser jump to link anchor
        	});

        	//Click event outside of subpanel
        	$(document).click(function() { //Click anywhere and...
        	    $(".subpanel").hide(); //hide subpanel
        	    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
        	});
        	$('.subpanel ul').click(function(e) {
        	    e.stopPropagation(); //Prevents the subpanel ul from closing on click
        	});

        	//Show/Hide delete icons on Alert Panel
        	$("#aboutus li").hover(function() {
        	    $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
        	},function() {
        	    $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
        	});
			
		});
		
	</script>